<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>保龄球</title>
    <!-- 使用CDN的ElementPlus样式，也可以把文件下载到本地再引入 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <style>
        /* 取消浏览器的默认样式 */
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        .box {
            display: flex;
        }

        .box>li {
            padding: 0px 10px;
        }
    </style>
</head>

<body>
    <main id="app">
        <ul class="box">
            <li>
                <h3>轮次</h3>
                <p>第一投</p>
                <p>第二投</p>
                <p>分数</p>
            </li>
            <li v-for="(item,idx) in tableData">
                <h3>{{getTurn(idx)}}</h3>
                <p>{{item.roll1}}</p>
                <p>{{item.roll2 ? item.roll2 : '&nbsp'}}</p>
                <p>{{item.score}}</p>
            </li>
        </ul>
    </main>
</body>
<!-- 使用CDN的Vue3，也可以把文件下载到本地再引入 -->
<script src="https://unpkg.com/vue@3"></script>
<!-- 使用CDN的ElementPlus库，也可以把文件下载到本地再引入，记得先引入Vue3 -->
<script src="https://unpkg.com/element-plus"></script>
<script>
    // 从Vue中引入需要使用的方法（ES6的解构赋值）
    const { createApp, reactive } = Vue;
    // 其它的也通过该方式
    // const {createApp,ref,reactive,computed,watch...}

    // 定义创建Vue的选项对象
    const App = {
        // vue3 只需要提供一个setup函数即可
        setup() {
            let tableData = reactive([{
                roll1: 'X',
                score: '30',
            },
            {
                roll1: '-',
                roll2: '/',
                score: '(0+10+0)'
            },
            {
                roll1: '-',
                roll2: '/',
                score: '(0+10+3)'
            },
            {
                roll1: '3',
                roll2: '5',
                score: '(3+5)'
            },
            {
                roll1: 'X',
                score: '30'
            },
            {
                roll1: '4',
                roll2: '/',
                score: '(4+6+7)'
            },
            {
                roll1: '7',
                roll2: '/',
                score: '(7+3+9)'
            },
            {
                roll1: '9',
                roll2: '-',
                score: '9'
            },
            {
                roll1: 'X',
                score: '30'
            },
            {
                roll1: 'X',
                score: '30'
            },
            {
                roll1: 'X',
                roll2: 'X',
                score: '0'
            },
            ]);

            function getTurn(i) {
                if (i <= 9) {
                    return `第${i + 1}轮`;
                } else {
                    return "奖励轮"
                }
            }

            function submitForm() {
                console.log("点击确认")
            }

            // setup()函数，必须return一个对象，对象中的属性可以在模板中进行使用
            return {
                tableData,
                submitForm,
                getTurn
            }
        }
    }

    // 利用选项对象，和创建方法，创建Vue对象
    const app = createApp(App);

    // 使用ElementPlus
    app.use(ElementPlus);

    // 挂载节点
    app.mount("#app");

</script>

</html>